<template>
  <div>
    <el-row>
      <el-autocomplete style="width: 300px" placeholder="请输入内容，我来帮你猜一猜" :fetch-suggestions="querySearch" :trigger-on-focus="false" v-model="values"></el-autocomplete>
    </el-row>
    <el-row>
      <el-table :data="user" border :header-cell-style="{background:'aliceblue',fontSize:'16px'}">
        <el-table-column label="序号" prop="id"></el-table-column>
        <el-table-column label="姓名" prop="name"></el-table-column>
        <el-table-column label="年龄" prop="age"></el-table-column>
        <el-table-column label="住址" prop="address"></el-table-column>
        <el-table-column label="操作">
          <template v-slot="scope">
            <el-button type="primary" @click="edit(scope.row)">编辑</el-button>
          </template>
        </el-table-column>
      </el-table>
    </el-row>
    <el-row>
      <el-date-picker type="date" v-model="date" placeholder="选择日期" @change="changeDate" value-format="yyyy-MM-dd"></el-date-picker>
      <el-date-picker type="datetime" v-model="datetime" placeholder="选择日期时间" @change="changeDateTime" value-format="yyyy-MM-dd HH:mm:ss"></el-date-picker>
    </el-row>
    <el-row>
      <el-radio-group v-model="radio" @change="changeSex">
        <el-radio label="男"></el-radio>
        <el-radio label="女"></el-radio>
      </el-radio-group>
    </el-row>
    <el-row>
      <el-select v-model="values">
        <el-option v-for="f in frute" :key="f.id" :value="f.name"></el-option>
      </el-select>
    </el-row>
    <el-row>
      <el-select v-model="select" filterable @change="changeSelect">
        <el-option v-for="item in card" :key="item.card" :value="item.card" :label="item.label"></el-option>
      </el-select>
    </el-row>
  </div>
</template>

<script>
  export default {
    data(){
      return{
        values:"",
        coffees:[{value:'1星巴克'}, {value:'2瑞幸'}, {value:'3库迪'}],
        user:[
          {name:"苏草明",age:20,address:"辽宁省大连市",id:1},
          {name:"苏草明",age:20,address:"辽宁省大连市",id:2},
          {name:"苏草明",age:20,address:"辽宁省大连市",id:3},
          {name:"苏草明",age:20,address:"辽宁省大连市",id:4},
        ],
        date:"",
        datetime:"",
        radio:"",
        frute:[
          {id:1,name:"橘子"},
          {id:2,name:"苹果"},
          {id:3,name:"葡萄"},
          {id:4,name:"香蕉"}
        ],
        select:"",
        card:[
          {label:"苏",card:465564251565545445},
          {label:"草",card:465463822222545445},
          {label:"明",card:465541111165545445}
        ]
      }
    },
    methods:{
      querySearch(values,cb){
        let result=values?this.coffees.filter(v=>v.value.includes(values)):this.coffees;
        console.log(result)
        cb(result)
      },
      edit(scope){
        // console.log(scope.id)
        this.$confirm('这是个什么玩意','提示',{
          type:'warning'
        }).then(res=>{
          this.$message.success('ok')
        }).catch(()=>{
          this.$message.error('no')
        })
      },
      changeDate(){
        console.log(this.date)
      },
      changeDateTime(){
        console.log(this.datetime)
      },
      changeSex(){
        console.log(this.radio)
      },
      changeSelect(){
        console.log(this.select)
      }
    }
  }
</script>